<template>
	<view class="container">
		<view class="orders-switch">
			<view :class="'item ' + (showType == 0 ? 'active' : '')" @tap="switchTab" data-index="0" style="width:12%">
				<view class="txt">全部</view>
			</view>
			<view :class="'item ' + (showType == 1 ? 'active' : '')" @tap="switchTab" data-index="1">
				<view class="txt">待付款</view>
			</view>
			<view :class="'item ' + (showType == 2 ? 'active' : '')" @tap="switchTab" data-index="2">
				<view class="txt">待发货</view>
			</view>
			<view :class="'item ' + (showType == 3 ? 'active' : '')" @tap="switchTab" data-index="3">
				<view class="txt">待收货</view>
			</view>
			<view :class="'item ' + (showType == 4 ? 'active' : '')" @tap="switchTab" data-index="4">
				<view class="txt">待评价</view>
			</view>
			<view :class="'item ' + (showType == 5 ? 'active' : '')" @tap="switchTab" data-index="5" style="width:20%">
				<view class="txt">退款/售后</view>
			</view>
		</view>
		<view class="no-order" v-if="orderList.length <= 0">
			<view class="c">
				<image src="/static/static/images/noOrder.png"></image>
				<text>目前没有任何订单哦～</text>
			</view>
		</view>

		<view class="orders">
			<view v-for="(item, index) in orderList" :key="index" class="order">
				<navigator :url="'../' + (item.freightType == 1 ? 'fetchOrderDetail/fetchOrderDetail' : 'orderDetail/orderDetail') + '?id=' + item.id" class="order-header">
					<view class="order-header-code">订单编号：{{ item.orderSn }}</view>
					<view class="order-header-status">{{ item.orderStatusText }}</view>
				</navigator>
				<navigator :url="'../' + (item.freightType == 1 ? 'fetchOrderDetail/fetchOrderDetail' : 'orderDetail/orderDetail') + '?id=' + item.id" class="goods">
					<view v-for="(gitem, index2) in item.goodsList" :key="index2" class="item">
						<view class="img">
							<image :src="gitem.picUrl"></image>
						</view>
						<view class="info">
							<view class="info-title">{{ gitem.goodsName }}</view>
							<view class="info-counter">x {{ gitem.number }}</view>
							<view class="info-content">规格：{{ gitem.specifications.toString() }}</view>
							<view style="display:flex;align-items:center;justify-content:space-between;">
								<view class="info-price">￥{{ gitem.price }}</view>
								<view class="info-action">
									<!-- <view class="btn active" :data-index="item.id" @tap="refundOrder" v-if="showType != 1 && !item.handleOption.refund && item.goodsList.length > 1">退货查看</view> -->
									<view class="btn_yellow" v-if="item.handleOption.comment && gitem.comment == 0" :data-oid="gitem.orderId" :data-gid="gitem.goodsId" @tap.stop="toCommentPostPage">去评价</view>
									<view class="btn_yellow_border" v-if="item.handleOption.rebuy" :data-index="gitem.goodsId" @tap.stop="toGoodsDetailPage">再次购买</view>
									<view class="btn_yellow" v-if="gitem.refundId != null" :data-index="gitem.refundId" @tap.stop="toRefundDetailPage">退货查看</view>
								</view>
							</view>
						</view>
					</view>
				</navigator>
				<view class="order-footer">
					<view class="order-footer-price">实付:<text class="order-footer-price-count" style="font-size:35rpx;"><span style="font-size:24rpx;">￥</span>{{ item.actualPrice }}</text></view>
					<view class="order-footer-action">
						<view class="btn_orange_border" :data-index="item.id" @tap="cancelOrder" v-if="item.handleOption.cancel">取消订单</view>
						<view class="btn_orange" :data-index="item.id" @tap="payOrder" v-if="item.handleOption.pay">去付款</view>
						<view class="btn_orange" :data-index="item.id" @tap="detailExpress" v-if="item.freightType != 1 && item.handleOption.confirm">查看物流</view>
						<view class="btn_orange" :data-index="item.id" @tap="confirmOrder" v-if="item.handleOption.confirm">确认{{ item.freightType != 1 ? '收货' : '提货' }}</view>
						<view class="btn_orange_border" :data-index="item.id" @tap="deleteOrder" v-if="item.handleOption.delete">删除订单</view>

						<!-- <view class="btn_orange" @tap.stop="toRefundDetailPage" v-if="item.goodsList && item.goodsList[0] && item.goodsList[0].refundId != null" :data-index="item.goodsList[0].refundId">退货查看</view> -->
						<view class="btn_orange" :data-index="item.id" @tap="refundOrder" v-if="item.orderStatusText != '已取消' && item.orderStatusText != '已取消(系统)' && !item.handleOption.pay && (item.goodsList && item.goodsList[0] && !item.goodsList[0].refundId)">申请退款</view>
						<!-- <view class="btn_orange" :data-index="item.id" @tap="giftSend" v-if="item.freightType == 1 && item.handleOption.giftSend">赠送</view> -->
						<!-- <view class="btn_orange" :data-index="item.id" @tap="refundOrder" v-if="item.handleOption.refund">申请退款</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require('../../../utils/util.js')
const api = require('../../../config/api.js')

export default {
	data()
	{
		return {
			orderList: [],
			showType: 0,
			page: 1,
			size: 10,
			totalPages: 1,
		}
	},

	components: {},
	props: {},
	onLoad: function (options)
	{
		// 页面初始化 options为页面跳转所带来的参数
		let that = this

		try
		{
			var tab = uni.getStorageSync('tab')
			this.setData({
				showType: tab,
			})
		} catch (e) { }
	},

	onReachBottom()
	{
		if (this.totalPages > this.page)
		{
			this.setData({
				page: this.page + 1,
			})
			this.getOrderList()
		} else
		{
			uni.showToast({
				title: '没有更多订单了',
				icon: 'none',
				duration: 2000,
			})
			return false
		}
	},

	onReady: function ()
	{
		// 页面渲染完成
	},
	onShow: function ()
	{
		this.setData({
			orderList: [],
			page: 1,
			size: 10,
			totalPages: 1,
		})
		this.getOrderList()
	},
	onHide: function ()
	{
		// 页面隐藏
	},
	onUnload: function ()
	{
		// 页面关闭
	},
	methods: {
		getOrderList()
		{
			let that = this
			util
				.request(api.OrderList, {
					showType: that.showType,
					page: that.page,
					size: that.size,
					sort: 'update_time'
				})
				.then(function (res)
				{
					if (res.errno === 0)
					{
						console.log(res.data)
						that.setData({
							orderList: that.orderList.concat(res.data.data),
							totalPages: res.data.totalPages,
						})
					}
				})
		},

		switchTab: function (event)
		{
			let showType = event.currentTarget.dataset.index

			try
			{
				uni.setStorageSync('tab', showType)
			} catch (e) { }


			this.setData({
				orderList: [],
				showType: showType,
				page: 1,
				size: 10,
				totalPages: 1,
			})
			this.getOrderList()
		},
		// “去付款”按钮点击效果
		payOrder: function (e)
		{
			let that = this

			let topic = uni.getStorageSync('topic')
			if (!topic)
			{
				console.log('topic id err')
				return
			}

			let orderId = e.currentTarget.dataset.index
			util
				.request(
					api.OrderPrepay,
					{
						topicId: topic.id,
						orderId: orderId,
					},
					'POST'
				)
				.then(function (res)
				{
					if (res.errno === 0)
					{
						const payParam = res.data
						wxSDK.chooseWXPay({
							timestamp: payParam.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							nonceStr: payParam.nonceStr, // 支付签名随机串，不长于 32 位
							package: payParam.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							signType: payParam.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
							paySign: payParam.paySign, // 支付签名
							success: function (res)
							{
								// 支付成功后的回调函数
								console.log(res)
								console.log('支付过程成功')
								uni.redirectTo({
									url: '/pages/payResult/payResult?status=1&orderId=' + orderId,
								})
							},
							cancel: function (res)
							{
								// 支付成功后的回调函数
								console.log(res)
								console.log('支付过程失败')
								util.showErrorToast('支付失败')
								uni.redirectTo({
									url: '/pages/payResult/payResult?status=0&orderId=' + orderId,
								})
							},
						})
						// uni.requestPayment({
						//   timeStamp: payParam.timeStamp,
						//   nonceStr: payParam.nonceStr,
						//   package: payParam.packageValue,
						//   signType: payParam.signType,
						//   paySign: payParam.paySign,
						//   success: function(res) {
						//     util.redirect('/pages/ucenter/order/order')
						//   },
						//   fail: function(res) {
						//     util.showErrorToast('支付失败')
						//   },
						//   complete: function(res) {
						//     console.log('支付过程结束')
						//   },
						// })
					}
				})
		},
		// “取消订单”点击效果
		cancelOrder: function (e)
		{
			let that = this
			let orderId = e.currentTarget.dataset.index
			uni.showModal({
				title: '',
				content: '确定要取消此订单？',
				success: function (res)
				{
					if (res.confirm)
					{
						util
							.request(
								api.OrderCancel,
								{
									orderId: orderId,
								},
								'POST'
							)
							.then(function (res)
							{
								if (res.errno === 0)
								{
									uni.showToast({
										title: '取消订单成功',
									})
									util.redirect('/pages/ucenter/order/order')
								} else
								{
									util.showErrorToast(res.errmsg)
								}
							})
					}
				},
			})
		},
		// “取消订单并退款”点击效果
		refundOrder: function (e)
		{
			let that = this
			let orderId = e.currentTarget.dataset.index
			/* uni.navigateTo({
					  url: '/pages/ucenter/orderRefund/orderRefund?id=' + orderId
				  }); */
			uni.navigateTo({
				url: '/pages/ucenter/orderRefund/index?id=' + orderId,
			})

			/*
				  wx.showModal({
					  title: '',
					  content: '确定要取消此订单？',
					  success: function (res) {
					  if (res.confirm) {
						  util.request(api.OrderRefund, {
						  orderId: orderId
						  }, 'POST').then(function (res) {
						  if (res.errno === 0) {
							  wx.showToast({
							  title: '取消订单成功'
							  });
							  util.redirect('/pages/ucenter/order/order');
						  } else {
							  util.showErrorToast(res.errmsg);
						  }
						  });
					  }
					  }
				  });
				  */
		},
		// “删除”点击效果
		deleteOrder: function (e)
		{
			let that = this
			let orderId = e.currentTarget.dataset.index
			uni.showModal({
				title: '',
				content: '确定要删除此订单？',
				success: function (res)
				{
					if (res.confirm)
					{
						util
							.request(
								api.OrderDelete,
								{
									orderId: orderId,
								},
								'POST'
							)
							.then(function (res)
							{
								if (res.errno === 0)
								{
									uni.showToast({
										title: '删除订单成功',
									})
									util.redirect('/pages/ucenter/order/order')
								} else
								{
									util.showErrorToast(res.errmsg)
								}
							})
					}
				},
			})
		},
		// “确认收货”点击效果
		confirmOrder: function (e)
		{
			let that = this
			let orderId = e.currentTarget.dataset.index
			uni.showModal({
				title: '',
				content: '提醒：您确认已经收到此订单中的商品？',
				success: function (res)
				{
					if (res.confirm)
					{
						util
							.request(
								api.OrderConfirm,
								{
									orderId: orderId,
								},
								'POST'
							)
							.then(function (res)
							{
								if (res.errno === 0)
								{
									uni.showToast({
										title: '确认收货成功！',
									})

									uni.setStorageSync('tab', '4')
									util.redirect('/pages/ucenter/order/order')
								} else
								{
									util.showErrorToast(res.errmsg)
								}
							})
					}
				},
			})
		},
		detailExpress: function (e)
		{
			let orderId = e.currentTarget.dataset.index
			uni.navigateTo({
				url: '/pages/ucenter/expressInfo/expressInfo?orderId=' + orderId,
			})
		},
		toRefundDetailPage: function (e)
		{
			let refundId = e.currentTarget.dataset.index
			uni.navigateTo({
				url: '../refundDetail/refundDetail?id=' + refundId,
			})
		},
		toGoodsDetailPage: function (e)
		{
			let goodsId = e.currentTarget.dataset.index
			uni.navigateTo({
				url: '../../goods/goods?id=' + goodsId,
			})
		},
		toCommentPostPage: function (e)
		{
			let orderId = e.currentTarget.dataset.oid
			let goodsId = e.currentTarget.dataset.gid
			uni.navigateTo({
				url: '../../commentPost/commentPost?orderId=' + orderId + '&valueId=' + goodsId + '&type=0',
			})
		},
		giftSend: function (e)
		{
			//赠送分享
			let orderId = e.currentTarget.dataset.index
			uni.navigateTo({
				url: '/pages/ucenter/fetchOrderDetail/fetchOrderDetail?id=' + orderId,
			})
		},
	},
}
</script>
<style>
page {
	height: 100%;
	width: 100%;
	background: #f4f4f4;
}

.orders-switch {
	width: 100%;
	background: #fff;
	height: 84rpx;
	display: flex;
	/* position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 3; */
	/* border-bottom: 1px solid rgba(0,0,0,.15); */
}

.orders-switch .item {
	display: block;
	height: 82rpx;
	width: calc(100% / 6);
	text-align: center;
}

.orders-switch .item .txt {
	display: block;
	height: 82rpx;
	line-height: 82rpx;
	color: #3c3e40;
	font-size: 26rpx;
}

.orders-switch .item.active .txt {
	color: #fd4d36;
	border-bottom: 4rpx solid #fd4d36;
}

.no-order {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.no-order .c {
	width: 100%;
	height: auto;
	margin-top: 200rpx;
}

.no-order .c image {
	margin: 0 auto;
	display: block;
	text-align: center;
	width: 414rpx;
	height: 336rpx;
}

.no-order .c text {
	margin: 0 auto;
	display: block;
	width: 258rpx;
	height: 29rpx;
	line-height: 29rpx;
	text-align: center;
	font-size: 29rpx;
	color: #999;
}

.orders {
	height: auto;
	width: 100%;
	overflow: hidden;
	padding: 30rpx;
	box-sizing: border-box;
}

.order {
	background-color: #fff;
	margin-bottom: 30rpx;
	border-radius: 8rpx;
	overflow: hidden;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}

.order-header {
	height: 83.3rpx;
	line-height: 83.3rpx;
	margin-left: 31.25rpx;
	margin-right: 31.25rpx;
	border-bottom: 1px solid #f4f4f4;
	font-size: 30rpx;
	color: #333;
}

.order-header-code {
	float: left;
	color: #898b8d;
	font-size: 26rpx;
}

.order-header-status {
	float: right;
	color: #fd4d36;
	font-size: 24rpx;
}

.order-footer {
	height: 100rpx;
	box-sizing: border-box;
	margin: 0 30rpx;
	border-top: 1px solid #f4f4f4;
	font-size: 30rpx;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.order-footer-price {
	color: #3c3e40;
	font-size: 24rpx;
}

.order-footer-price-count {
	color: #fd4d36;
	font-weight: bold;
}

.order-footer .btn_orange,
.order-footer .btn_orange_border {
	margin-left: 10rpx;
}

.order-footer-action {
	display: flex;
}

.info-action {
	display: flex;
}

.info-action .btn_yellow,
.info-action .btn_yellow_border {
	margin-left: 10rpx;
}

.order .goods {
	margin-top: 30rpx;
	background: #fff;
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.goods .item {
	display: flex;
	align-items: top;
	/* height: 202rpx; */
	margin-bottom: 15.25rpx;
	padding-bottom: 15.25rpx;
	border-bottom: 1px solid #f4f4f4;
}

.goods .item:last-child {
	border-bottom: none;
}

.goods .item .img {
	height: 140rpx;
	width: 140rpx;
	background: #f4f4f4;
	border-radius: 6rpx;
	overflow: hidden;
}

.goods .item .img image {
	height: 140rpx;
	width: 140rpx;
}

.info {
	flex: 1;
	min-height: 154rpx;
	margin-left: 30rpx;
	position: relative;
}

.info-title {
	color: #212223;
	font-size: 28rpx;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 10rpx;
	margin-right: 80rpx;
}

.info-content {
	color: #898b8d;
	display: flex;
	justify-content: space-between;
	margin-bottom: 15rpx;
}

.info-content text {
	color: #898b8d;
	font-size: 28rpx;
}

.info-price {
	color: #898b8d;
	font-size: 28rpx;
	transform: translateX(-5rpx);
}

.info-counter {
	position: absolute;
	right: 5rpx;
	top: 0;
}

.btn_orange {
	font-size: 26rpx;
	height: 55rpx;
	line-height: 55rpx;
	padding: 0 20rpx;
	border-radius: 27rpx;
	background: linear-gradient(124deg, #f54c56 17%, #f95d20 83%);
	color: #fff;
}

.btn_orange_border {
	font-size: 26rpx;
	height: 55rpx;
	line-height: 51rpx;
	padding: 0 20rpx;
	border-radius: 27rpx;
	border: solid 2rpx #f54c56;
	background: #fff;
	color: #f54c56;
}

.btn_yellow {
	font-size: 26rpx;
	height: 55rpx;
	line-height: 55rpx;
	padding: 0 20rpx;
	border-radius: 27rpx;
	background: linear-gradient(124deg, #f8a734 17%, #f9bb34 83%);
	color: #fff;
}

.btn_yellow_border {
	font-size: 26rpx;
	height: 55rpx;
	line-height: 51rpx;
	padding: 0 20rpx;
	border-radius: 27rpx;
	border: solid 2rpx #f8a734;
	background: #fff;
	color: #f8a734;
}

.no-order .c uni-image {
	height: 296rpx;
	width: 610rpx;
}

.no-order .c uni-text {
	width: auto;
	font-size: 28rpx;
	line-height: 35rpx;
	color: #c1c1c1;
	transform: translate(20rpx, -50rpx);
}
</style>
